<template>
  <div class="user-page page-view">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <div class="list">
        <div class="home-icon">
          <i class="iconfont icon-home"></i>
        </div>
        <div class="item">
          <router-link to="/">
            <span class="text">首页</span>
          </router-link>
        </div>
        <div class="seperate">
          <i class="iconfont icon-arrow-right-thin"></i>
        </div>
        <div class="item">
          <span class="text">用户管理</span>
        </div>
      </div>
      <h1 class="page-title">用户管理</h1>
    </div>

    <!-- 操作栏 -->
    <div class="action-bar">
      <button class="v-button primary" @click="handleAddUser">
        <i class="iconfont icon-add"></i> 添加用户
      </button>
    </div>

    <!-- 搜索筛选条件 -->
    <div class="filter-bar">
      <div class="tab-group">
        <button v-for="tab in versionTabs" :key="tab.value" :class="['tab-button', { active: selectedVersion === tab.value }]"
          @click="handleTabChange(tab.value)">
          {{ tab.text }}
        </button>
      </div>
      
      <!-- 用户名搜索 -->
      <div class="filter-group">
        <label>用户名:</label>
        <input v-model="usernameQuery" placeholder="请输入用户名" class="form-input" style="width: 150px;" />
      </div>
      
      <!-- 手机号搜索 -->
      <div class="filter-group">
        <label>手机号:</label>
        <input v-model="mobileQuery" placeholder="请输入手机号" class="form-input" style="width: 150px;" type="tel" />
      </div>
      
      <!-- 状态筛选 -->
      <div class="filter-group">
        <label>用户状态:</label>
        <BaseSelect v-model="statusFilter" :options="[...statusOptions, { value: '', text: '全部' }]" placeholder="请选择状态" />
      </div>
      
      <!-- 搜索按钮 -->
      <div class="filter-group">
        <button class="v-button primary" @click="handleSearch">
          <i class="iconfont icon-search"></i> 搜索
        </button>
      </div>
      
      <!-- 重置按钮 -->
      <div class="filter-group">
        <button class="v-button" @click="handleSearchClear">
          <i class="iconfont icon-refresh"></i> 重置
        </button>
      </div>
    </div>

    <!-- 数据表格 -->
    <div class="data-table">
      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>手机号</th>
            <th>状态</th>
            <th>权限</th>
            <th>用户版本</th>
            <th>所属公司</th>
            <th>创建时间</th>
            <th>VIP时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="user in paginatedUsers" :key="user.id">
            <td>{{ user.id }}</td>
            <td>{{ user.username }}</td>
            <td>{{ user.mobile || '-' }}</td>
            <td>
              <span class="status-badge" :class="user.status === '1' ? 'active' : 'inactive'">
                {{ user.status === '1' ? '正常' : '禁用' }}
              </span>
            </td>
            <td>
              <span class="permission-badge permission-member">
                普通用户
              </span>
            </td>
            <td>
              <span class="version-tag" :class="`version-${user.version}`">
                {{ getVersionText(user.version) }}
              </span>
            </td>
            <td>{{ user.company_name || '-' }}</td>
            <td>{{ formatDate(user.create_time * 1000) }}</td>
            <td>{{ user.vip_time ? formatDate(user.vip_time * 1000) : '-' }}</td>
            <td class="control">
              <button @click="handleEditUser(user)" class="v-button"
                :disabled="user.permission === 'superadmin' || !canEditUser(user)"
                :title="user.permission === 'superadmin' ? '超级管理员禁止修改' : !canEditUser(user) ? '您没有权限编辑此用户' : ''">
                <i class="iconfont icon-edit"></i> 编辑
              </button>
              <button class="v-btn danger" @click="confirmDelete(user)"
                :disabled="user.permission === 'superadmin' || !canDeleteUser(user)"
                :title="user.permission === 'superadmin' ? '超级管理员禁止删除' : !canDeleteUser(user) ? '您没有权限删除此用户' : ''">
                <i class="iconfont icon-delete"></i> 删除
              </button>
              <button class="v-btn" @click="confirmToggleStatus(user)"
                :disabled="user.permission === 'superadmin' || !canEditUser(user)"
                :title="user.permission === 'superadmin' ? '超级管理员禁止修改状态' : !canEditUser(user) ? '您没有权限修改此用户状态' : ''">
                <i class="iconfont icon-switch"></i> {{ user.status === '1' ? '禁用' : '启用' }}
              </button>
            </td>
          </tr>
          <tr v-if="loading">
            <td colspan="10" class="loading">加载中...</td>
          </tr>
          <tr v-else-if="filteredUsers.length === 0">
            <td colspan="10" class="empty-row">
              <i class="iconfont icon-empty"></i>
              <p>暂无数据</p>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 分页 -->
    <div class="pagination-wrapper" v-if="totalPages > 0 && !loading">
      <div class="page-info">
        共 {{ totalCount }} 条记录，第 {{ currentPage }} / {{ totalPages }} 页
      </div>
      <div class="v-pagination">
        <button class="v-button" :disabled="currentPage === 1" @click="handlePageChange(1)">
          首页
        </button>
        <button class="v-button" :disabled="currentPage === 1" @click="handlePageChange(currentPage - 1)">
          上一页
        </button>
        <button v-for="page in visiblePages" :key="page" class="v-button" :class="{ active: currentPage === page }"
          @click="handlePageChange(page)">
          {{ page }}
        </button>
        <button class="v-button" :disabled="currentPage === totalPages" @click="handlePageChange(currentPage + 1)">
          下一页
        </button>
        <button class="v-button" :disabled="currentPage === totalPages" @click="handlePageChange(totalPages)">
          末页
        </button>
      </div>
    </div>

    <!-- 编辑弹窗 -->
    <vPopup v-model="showModal" :title="isEdit ? '编辑用户' : '添加用户'" confirm-text="确定" width="800px" :async-confirm="true"
      @confirm="handleSubmit" :custom-styles="popupCustomStyles" :keep-open-on-error="true"
      :keep-open-after-confirm="true">
      <div class="v-form double-col">
        <!-- 用户名和手机号 -->
        <div class="form-group">
          <label class="form-label">用户名</label>
          <input v-model="formData.username" class="form-input" placeholder="请输入用户名" :disabled="isEdit" />
        </div>
        <div class="form-group">
          <label class="form-label required">手机号</label>
          <input v-model="formData.mobile" class="form-input" placeholder="请输入手机号" type="tel" />
        </div>

        <!-- 隐藏用户类型和职位选择，默认设置为管理员 -->
        <input type="hidden" v-model="formData.permission" value="admin">
        <input type="hidden" v-model="formData.position" value="管理员">
        
        <!-- 显示当前用户类型和职位信息 -->
        <div class="form-group">
          <label class="form-label">用户类型</label>
          <div class="form-input readonly">管理员</div>
        </div>
        <div class="form-group">
          <label class="form-label">职位</label>
          <div class="form-input readonly">管理员</div>
        </div>

        <!-- 所属公司 -->
        <div class="form-group">
          <label class="form-label required">所属公司</label>
          <BaseSelect v-model="formData.company_id" :options="companyOptions" placeholder="请选择所属公司"
            :disabled="!canChangeCompany" />
        </div>

        <!-- 密码或重置密码 -->
        <div class="form-group" v-if="!isEdit || resetPassword">
          <label class="form-label">密码</label>
          <input v-model="formData.password" class="form-input" placeholder="密码长度8-20位，包含字母和数字" type="password" />
        </div>
        <div class="form-group" v-if="isEdit && !resetPassword">
          <label class="form-label">重置密码</label>
          <button @click="resetPassword = true" class="v-btn">
            <i class="iconfont icon-refresh"></i> 点击重置密码
          </button>
        </div>

        <!-- 用户版本 -->
        <div class="form-group">
          <label class="form-label">用户版本</label>
          <BaseSelect v-model="formData.version" :options="versionOptions" placeholder="请选择用户版本" />
        </div>

        <!-- 状态 -->
        <div class="form-group">
          <label class="form-label">状态</label>
          <div class="toggle-wrapper">
            <vToggle v-model="formData.status" />
            <span class="toggle-label">{{ formData.status ? '启用' : '禁用' }}</span>
          </div>
        </div>
      </div>
    </vPopup>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, watch } from "vue";
import { get, post } from "@/utils/request";
import { formatDate } from "@/utils/date";
import { vConfirm } from "@/plugins/vConfirm";
import { vToast } from "@/plugins/vToast";
import BaseSelect from '@/components/BaseSelect.vue';
import { getPermission, getCompanyId, getPosition, getUserInfo } from '@/utils/auth';

// 数据
const userList = ref([]);
const loading = ref(false);
const usernameQuery = ref(""); // 用户名搜索
const mobileQuery = ref(""); // 手机号搜索
const statusFilter = ref("");
const currentPage = ref(1);
const pageSize = ref(10);
const totalCount = ref(0);

// 版本选项卡
const versionTabs = ref([
  { value: '', text: '全部' },
  { value: '1', text: '个人版' },
  { value: '2', text: '高级版' },
  { value: '3', text: '团队版' },
  { value: '4', text: '企业版' }
]);

// 当前选中的版本
const selectedVersion = ref('');

// 获取版本文本
const getVersionText = (version) => {
  const option = versionTabs.value.find(opt => opt.value === version);
  return option ? option.text : '-';
};

// 直接使用后端返回的用户列表，不再在前端进行过滤
// 过滤逻辑已移至后端实现
const filteredUsers = ref([]);

// 弹窗相关
const showModal = ref(false);
const isEdit = ref(false);
const editLoading = ref(false);
const resetPassword = ref(false);
const formData = ref({
  id: '',
  username: '',
  mobile: '',
  permission: 'member',
  position: '',
  password: '',
  status: 1,
  company_id: '',
  company_name: ''
});

// 公司列表相关 - 确保初始值是数组
const companyList = ref([]);
const companyOptions = computed(() => {
  // 确保companyList.value是数组
  const safeList = Array.isArray(companyList.value) ? companyList.value : [];
  return safeList.map(company => ({
    value: company.id,
    text: company.name
  }));
});

// 获取公司列表
const fetchCompanies = async () => {
  try {
    const res = await get("/company/list", { page: 1, pageSize: 100 });
    // 确保始终设置为数组，即使响应数据为空
    companyList.value = Array.isArray(res?.data?.list) ? res.data.list : [];
  } catch (error) {
    vToast.error("获取公司列表失败");
    console.error(error);
    // 出错时也设置为空数组，防止undefined
    companyList.value = [];
  }
};

// 当前用户信息
const currentUserPermission = computed(() => getPermission());
const currentUserCompanyId = computed(() => getCompanyId());
const currentUserPosition = computed(() => getPosition());

// 弹窗自定义样式 - 解决Teleport导致的scoped样式无法应用问题
const popupCustomStyles = computed(() => ({
  '--form-row-display': 'flex',
  '--form-row-gap': '20px',
  '--form-row-width': '100%',
  '--form-half-width': 'calc(50% - 10px)',
  '--form-padding': '0 10px',
  '--form-group-display': 'flex',
  '--form-group-direction': 'column'
}));

// 下拉选项
const permissionOptions = [
  { value: 'superadmin', text: '超级管理员' },
  { value: 'admin', text: '管理员' },
  { value: 'member', text: '普通用户' }
];

// 职位选项
const positionOptions = [
  { value: '', text: '无' },
  { value: '拍摄主管', text: '拍摄主管' },
  { value: '后期主管', text: '后期主管' },
  { value: '市场主管', text: '市场主管' },
  { value: '摄影师', text: '摄影师' },
  { value: '录像师', text: '录像师' },
  { value: '照片修图师', text: '照片修图师' },
  { value: '视频剪辑师', text: '视频剪辑师' },
  { value: '市场运营', text: '市场运营' },
  { value: '市场销售', text: '市场销售' },
  { value: '售后客服', text: '售后客服' }
];

// 根据当前用户权限和职位过滤可选择的权限选项
const availablePermissionOptions = computed(() => {
  if (currentUserPermission.value === 'superadmin') {
    return permissionOptions;
  } else if (currentUserPermission.value === 'admin') {
    // 管理员只能创建普通用户
    return permissionOptions.filter(option => option.value === 'member');
  }
  return [];
});

// 判断是否可以修改用户权限
const canChangePermission = computed(() => {
  // 超级管理员可以修改所有用户的权限
  if (currentUserPermission.value === 'superadmin') {
    return true;
  }
  // 其他用户不能修改权限
  return false;
});

// 判断是否可以修改公司信息
const canChangeCompany = computed(() => {
  // 超级管理员可以修改所有用户的公司
  if (currentUserPermission.value === 'superadmin') {
    return true;
  }
  // 管理员添加新用户时可以选择公司
  if (currentUserPermission.value === 'admin' && !isEdit.value) {
    return true;
  }
  // 其他情况不能修改公司
  return false;
});

// 根据当前用户职位过滤可选择的职位选项
const availablePositionOptions = computed(() => {
  if (currentUserPermission.value === 'superadmin') {
    return positionOptions;
  } else if (currentUserPermission.value === 'admin') {
    // 根据当前管理员职位过滤可创建的职位
    if (currentUserPosition.value === '拍摄主管') {
      return positionOptions.filter(option =>
        ['摄影师', '录像师'].includes(option.value)
      );
    } else if (currentUserPosition.value === '后期主管') {
      return positionOptions.filter(option =>
        ['照片修图师', '视频剪辑师'].includes(option.value)
      );
    } else if (currentUserPosition.value === '市场主管') {
      return positionOptions.filter(option =>
        ['市场运营', '市场销售', '售后客服'].includes(option.value)
      );
    }
    return positionOptions.filter(option => option.value === '');
  }
  return [];
});

const statusOptions = [
  { value: 1, text: '启用' },
  { value: 0, text: '禁用' }
];

// 用户版本选项 - value使用字符串格式以匹配后端返回的数据类型
const versionOptions = [
  { value: '1', text: '个人版' },
  { value: '2', text: '高级版' },
  { value: '3', text: '团队版' },
  { value: '4', text: '企业版' }
];

// 分页
const totalPages = ref(0);
const maxVisible = ref(5);

// 分页后的用户列表
const paginatedUsers = computed(() => {
  return userList.value;
});

// 计算可见页码
const visiblePages = computed(() => {
  const pages = [];
  const half = Math.floor(maxVisible.value / 2);
  let start = currentPage.value - half;
  let end = currentPage.value + half;

  if (start < 1) {
    start = 1;
    end = Math.min(maxVisible.value, totalPages.value);
  }

  if (end > totalPages.value) {
    end = totalPages.value;
    start = Math.max(1, end - maxVisible.value + 1);
  }

  for (let i = start; i <= end; i++) {
    pages.push(i);
  }

  return pages;
});

// 获取用户列表
const fetchUsers = async () => {
  loading.value = true;
  try {
    const params = {
      page: currentPage.value,
      pageSize: pageSize.value
    };

    // 添加搜索关键词 - 后端只支持keyword参数，会同时匹配用户名、手机号和真实姓名
    let keyword = '';
    if (usernameQuery.value) {
      keyword = usernameQuery.value;
    } else if (mobileQuery.value) {
      keyword = mobileQuery.value;
    }
    
    if (keyword) {
      params.keyword = keyword;
    }

    if (statusFilter.value !== "") {
      params.status = statusFilter.value;
    }
    
    // 添加版本筛选条件
    if (selectedVersion.value) {
      params.version = selectedVersion.value;
    }

    const res = await get("/user/customer", params);

    if (res.code === 200) {
      userList.value = res.data.list;
      totalCount.value = res.data.pagination.total;
      totalPages.value = res.data.pagination.totalPages;
      filteredUsers.value = res.data.list;
    }
  } catch (error) {
    vToast.error("获取用户列表失败");
    console.error(error);
  } finally {
    loading.value = false;
  }
};

// 版本切换处理
const handleTabChange = (value) => {
  selectedVersion.value = value;
  currentPage.value = 1;
  fetchUsers();
};

// 搜索
const handleSearch = () => {
  currentPage.value = 1;
  fetchUsers();
};

// 清空搜索
const handleSearchClear = () => {
  usernameQuery.value = "";
  mobileQuery.value = "";
  statusFilter.value = "";
  currentPage.value = 1;
  fetchUsers();
};

// 筛选方法已移除，搜索功能统一由handleSearch处理

// 分页
const handlePageChange = (page) => {
  if (page < 1 || page > totalPages.value || page === currentPage.value) {
    return;
  }
  currentPage.value = page;
  fetchUsers();
};

// 删除确认
const confirmDelete = (user) => {
  // 检查是否有权限删除该用户
  if (!canDeleteUser(user)) {
    vToast.error("您没有权限删除此用户");
    return;
  }

  vConfirm({
    message: `确定要删除用户【${user.username}】吗？`,
    onConfirm: () => deleteUser(user.id),
  });
};

// 删除用户
const deleteUser = async (id) => {
  try {
    const res = await post("/user/delete", { id });

    if (res.code === 200) {
      vToast.success("用户删除成功");
      fetchUsers();
    } else {
      vToast.error(res.msg || "删除失败");
    }
  } catch (error) {
    vToast.error("删除失败");
    console.error(error);
  }
};

// 获取权限标签
const getPermissionLabel = (permission) => {
  const permissionMap = {
    'superadmin': '超级管理员',
    'assistant': '超管助理',
    'admin': '管理员',
    'member': '普通用户'
  };
  return permissionMap[permission] || '未知权限';
};

// 检查是否有权限添加用户
const canAddUser = computed(() => {
  // 超级管理员、管理员和超管助理都可以添加用户
  return currentUserPermission.value === 'superadmin' || currentUserPermission.value === 'admin' || currentUserPermission.value === 'assistant';
});

// 打开添加用户弹窗
const handleAddUser = async () => {
  if (!canAddUser.value) {
    vToast.error("您没有权限添加用户");
    return;
  }

  // 如果是非超级管理员且companyList未加载，则先获取公司列表
  if (currentUserPermission.value !== 'superadmin' && (!Array.isArray(companyList.value) || companyList.value.length === 0)) {
    await fetchCompanies();
  }

  isEdit.value = false;
  resetPassword.value = false;
  formData.value = {
    id: '',
    username: '',
    mobile: '',
    permission: 'admin',
    position: '管理员',
    password: '',
    status: 1,
    // 非超级管理员只能在自己公司创建用户 - 确保公司ID为字符串类型
    company_id: currentUserPermission.value === 'superadmin' ? '' : (currentUserCompanyId.value ? String(currentUserCompanyId.value) : ''),
    // 设置公司名称，用于显示只读字段
    // 确保companyList已加载且是有效数组
    company_name: currentUserPermission.value === 'superadmin' ? '' : (Array.isArray(companyList.value) && companyList.value.length > 0 ? companyList.value.find(c => String(c.id) === String(currentUserCompanyId.value))?.name || '' : '')
  };
  showModal.value = true;
};

// 打开编辑用户弹窗
const handleEditUser = async (user) => {
  // 检查是否有权限编辑该用户
  if (!canEditUser(user) || currentUserPermission.value === 'member') {
    vToast.error("您没有权限编辑此用户");
    return;
  }

  isEdit.value = true;
  resetPassword.value = false;
  editLoading.value = true;
  try {
    const res = await get("/user/detail", { id: user.id });
    if (res.code === 200) {
      formData.value = {
    ...res.data,
    status: Number(res.data.status),
    company_id: res.data.company_id || '',
    company_name: res.data.company_name || '',
    position: res.data.position || '',
    mobile: res.data.mobile || ''
  };
      showModal.value = true;
    } else {
      vToast.error(res.msg || "获取用户详情失败");
    }
  } catch (error) {
    vToast.error("获取用户详情失败");
    console.error(error);
  } finally {
    editLoading.value = false;
  }
};

// 检查是否有权限编辑用户
const canEditUser = (user) => {
  // 超级管理员可以编辑所有用户
  if (currentUserPermission.value === 'superadmin') {
    return true;
  }
  
  // 超管助理也可以编辑所有用户
  if (currentUserPermission.value === 'assistant') {
    return true;
  }

  // 检查用户是否属于同一公司 - 修复类型不匹配问题
  const userCompanyId = user.company_id === null ? null : String(user.company_id);
  const currentCompanyId = currentUserCompanyId.value === null ? null : String(currentUserCompanyId.value);

  if (userCompanyId !== currentCompanyId) {
    return false;
  }

  // 检查用户权限
  if (user.permission === 'admin' && currentUserPermission.value !== 'admin') {
    return false;
  }

  // 根据职位检查权限
  if (currentUserPermission.value === 'admin') {
    if (currentUserPosition.value === '拍摄主管') {
      return ['摄影师', '录像师'].includes(user.position);
    } else if (currentUserPosition.value === '后期主管') {
      return ['照片修图师', '视频剪辑师'].includes(user.position);
    } else if (currentUserPosition.value === '市场主管') {
      return ['市场运营', '市场销售', '售后客服'].includes(user.position);
    }
  }

  return false;
};

// 检查是否有权限删除用户
const canDeleteUser = (user) => {
  // 超级管理员可以删除所有用户（除了自己）
  if (currentUserPermission.value === 'superadmin') {
    return user.id !== getUserInfo()?.id;
  }
  
  // 超管助理也可以删除所有用户（除了自己）
  if (currentUserPermission.value === 'assistant') {
    return user.id !== getUserInfo()?.id;
  }

  // 检查用户是否属于同一公司 - 修复类型不匹配问题
  const userCompanyId = user.company_id === null ? null : String(user.company_id);
  const currentCompanyId = currentUserCompanyId.value === null ? null : String(currentUserCompanyId.value);

  if (userCompanyId !== currentCompanyId) {
    return false;
  }

  // 检查用户权限
  if (user.permission === 'admin') {
    return false;
  }

  // 根据职位检查权限
  if (currentUserPermission.value === 'admin') {
    if (currentUserPosition.value === '拍摄主管') {
      return ['摄影师', '录像师'].includes(user.position);
    } else if (currentUserPosition.value === '后期主管') {
      return ['照片修图师', '视频剪辑师'].includes(user.position);
    } else if (currentUserPosition.value === '市场主管') {
      return ['市场运营', '市场销售', '售后客服'].includes(user.position);
    }
  }

  return false;
};

// 切换用户状态确认
const confirmToggleStatus = (user) => {
  // 检查是否有权限修改该用户状态
  if (!canEditUser(user)) {
    vToast.error("您没有权限修改此用户状态");
    return;
  }

  const action = user.status === '1' ? '禁用' : '启用';
  vConfirm({
    message: `确定要${action}用户【${user.username}】吗？`,
    onConfirm: () => toggleStatus(user),
  });
};

// 切换用户状态
const toggleStatus = async (user) => {
  try {
    const res = await post("/user/update", {
      id: user.id,
      status: user.status === '1' ? 0 : 1,
    });

    if (res.code === 200) {
      vToast.success(`用户${user.status === '1' ? '禁用' : '启用'}成功`);
      fetchUsers();
    } else {
      vToast.error(res.msg || "操作失败");
    }
  } catch (error) {
    vToast.error("操作失败");
    console.error(error);
  }
};

// 表单提交
const handleSubmit = async () => {
  // 表单验证
  if (!formData.value.username) {
    vToast.error("用户名不能为空");
    return;
  }

  if (!formData.value.mobile) {
    vToast.error("手机号不能为空");
    return;
  }

  // 验证手机号格式，支持标准手机号
  const mobileRegex = /^1[3-9]\d{9}$/;
  if (!mobileRegex.test(formData.value.mobile)) {
    vToast.error("请输入正确的手机号");
    return;
  }

  if (!isEdit.value && !formData.value.password) {
    vToast.error("密码不能为空");
    return;
  }

  // 添加用户时必须选择公司
  if (!isEdit.value && !formData.value.company_id) {
    vToast.error("请选择所属公司");
    return;
  }

  // 检查是否是超级管理员
  if (isEdit.value && formData.value.permission === 'superadmin') {
    vToast.error("超级管理员不能通过此方式修改，请使用专用通道");
    return;
  }

  editLoading.value = true;
  try {
    // 确保status是数字类型（1或0）而不是布尔值
    const submitData = {
      ...formData.value,
      status: formData.value.status ? 1 : 0,
      // 直接使用mobile字段
    };

    // 在编辑模式下，根据职位动态设置用户类型
    if (isEdit.value) {
      // 主管职位自动设置为管理员权限
      if (['拍摄主管', '后期主管', '市场主管'].includes(formData.value.position)) {
        submitData.permission = 'admin';
      } else {
        // 其他职位设置为普通用户权限
        submitData.permission = 'member';
      }
    }

    // 根据是编辑还是添加用户，调用不同的API接口
    const res = isEdit.value ?
      await post("/user/update", submitData) :
      await post("/user/create", submitData);

    if (res.code === 200) {
      vToast.success(isEdit.value ? "用户更新成功" : "用户添加成功");
      showModal.value = false;
      fetchUsers();
    } else {
      // 错误时不关闭弹窗
      vToast.error(res.msg || "操作失败");
    }
  } catch (error) {
    // 错误时不关闭弹窗
    vToast.error("操作失败");
    console.error(error);
  } finally {
    editLoading.value = false;
  }
};

// 初始化加载数据
onMounted(() => {
  fetchUsers();
  fetchCompanies();
});
</script>

<style scoped lang="less">
.user-page {
  .breadcrumb {
    margin-bottom: 20px;

    .list {
      display: flex;
      align-items: center;
      font-size: 14px;

      .home-icon {
        color: #999;
      }

      .item {
        margin-right: 8px;

        .text {
          color: #333;

          &:hover {
            color: var(--v-theme);
          }
        }
      }

      .seperate {
        margin-right: 8px;
        color: #999;
      }
    }

    .page-title {
      margin-top: 10px;
      font-size: 24px;
      font-weight: 500;
      color: #333;
    }
  }

  .action-bar {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    gap: 15px;

    .search-wrapper {
      flex: 1;
      max-width: 300px;
      margin-left: auto;

      .search-input {
        position: relative;
        display: flex;
        align-items: center;
        background: var(--v-card-bg);
        border-radius: var(--v-card-radius);
        border: 1px solid var(--v-border-color);
        padding: 0 10px;
        height: 36px;

        i {
          color: var(--v-text-light);
          margin-right: 8px;
        }

        input {
          flex: 1;
          border: none;
          background: transparent;
          outline: none;
          color: var(--v-text);

          &::placeholder {
            color: var(--v-text-light);
          }
        }

        .icon-close {
          cursor: pointer;
          margin-left: 8px;

          &:hover {
            color: var(--v-danger);
          }
        }
      }
    }
  }

  .filter-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    flex-wrap: wrap;

    .filter-group {
      display: flex;
      align-items: center;
      gap: 8px;

      label {
        font-size: 14px;
        color: var(--v-text);
      }

      select {
        padding: 6px 12px;
        border: 1px solid var(--v-border-color);
        border-radius: var(--v-card-radius);
        background: var(--v-card-bg);
        color: var(--v-text);
        outline: none;
        cursor: pointer;

        &:focus {
          border-color: var(--v-theme);
        }
      }
    }
  }

  /* Tab组胶囊样式 */
  .tab-group {
    display: inline-flex;
    background-color: #f5f5f5;
    border-radius: 20px;
    overflow: hidden;
  }
  
  .tab-button {
    padding: 6px 16px;
    background: #fff;
    border: 1px solid #eee;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    margin: 0;
    font-size: 14px;
    color: var(--v-text);
    border-radius: 0;
    border: none;
  }
  
  /* 左边第一个按钮左边圆角 */
  .tab-button:first-child {
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
  }
  
  /* 右边最后一个按钮右边圆角 */
  .tab-button:last-child {
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  
  /* 相邻按钮共享一条边框 */
  .tab-button:not(:last-child) {
    border-right: 1px solid #e1e1e1;
  }
  
  .tab-button.active {
    background-color: var(--v-theme);
    color: white;
    border-color: var(--v-theme);
  }
  
  .tab-button:hover:not(.active) {
    background-color: rgba(0, 0, 0, 0.05);
  }
  
  .data-table {
    background: var(--v-card-bg);
    border-radius: var(--v-card-radius);
    overflow: hidden;
    margin-bottom: 20px;

    table {
      width: 100%;
      border-collapse: collapse;

      thead {
        background: var(--v-table-header-bg);

        th {
          padding: 12px 16px;
          text-align: left;
          font-weight: 500;
          color: var(--v-text);
          border-bottom: 1px solid var(--v-border-color);
        }
      }

      tbody {
        tr {
          border-bottom: 1px solid var(--v-border-color);

          &:last-child {
            border-bottom: none;
          }

          td {
            padding: 12px 16px;
            color: var(--v-text);
          }
        }
      }

      .loading,
      .empty-row {
        text-align: center;
        padding: 40px;
        color: var(--v-text-light);
      }

      .empty-row {
        .iconfont {
          font-size: 48px;
          margin-bottom: 10px;
          display: block;
        }
      }

      .status-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;

        &.active {
          background-color: rgba(40, 199, 111, 0.1);
          color: var(--v-success);
        }

        &.inactive {
          background-color: rgba(234, 84, 85, 0.1);
          color: var(--v-danger);
        }
      }

      /* 权限徽章样式 */
      .permission-badge {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
      }

      .permission-badge.permission-superadmin {
        background-color: rgba(230, 162, 60, 0.1);
        color: #e6a23c;
      }

      .permission-badge.permission-admin {
        background-color: rgba(51, 153, 255, 0.1);
        color: #3399ff;
      }

      .permission-badge.permission-member {
        background-color: rgba(82, 196, 26, 0.1);
        color: #52c41a;
      }

      /* 超级管理员标识样式 */
      .superadmin-badge {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-weight: 600;
        color: #e6a23c;
      }

      /* 用户版本标签样式 */
      .version-tag {
        display: inline-block;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
        font-weight: 500;
      }

      /* 个人版 */
      .version-tag.version-1 {
        background-color: rgba(82, 196, 26, 0.1);
        color: #52c41a;
      }

      /* 高级版 */
      .version-tag.version-2 {
        background-color: rgba(51, 153, 255, 0.1);
        color: #3399ff;
      }

      /* 团队版 */
      .version-tag.version-3 {
        background-color: rgba(230, 162, 60, 0.1);
        color: #e6a23c;
      }

      /* 企业版 */
      .version-tag.version-4 {
        background-color: rgba(167, 139, 250, 0.1);
        color: #a78bfa;
      }

      .superadmin-mark {
        color: #e6a23c;
        font-size: 16px;
        animation: twinkle 2s infinite;
      }

      @keyframes twinkle {

        0%,
        100% {
          opacity: 0.5;
        }

        50% {
          opacity: 1;
        }
      }

      .control {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      /* 使用main.less中定义的统一按钮样式 */
    }
  }



  /* 表单样式 */
  .v-form {
    padding: 0 10px;
    width: 100%;
    
    .form-group {
      margin-bottom: 0;
    }
    
    .form-input {
      width: 100%;
      box-sizing: border-box;
      
      &.readonly {
        background-color: var(--v-bg);
        color: var(--v-text-light);
        border: 1px solid var(--v-border-color);
        cursor: not-allowed;
        padding: 8px 12px;
        border-radius: 4px;
        display: block;
        font-size: 14px;
        line-height: 1.5;
        font-family: inherit;
      }
    }
  }

  .pagination-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;

    .page-info {
      color: var(--v-text-light);
      font-size: 14px;
    }

    .v-pagination {
      display: flex;
      gap: 8px;

      .v-btn {
        min-width: 36px;
        height: 36px;
        padding: 0 12px;

        &[disabled] {
          opacity: 0.5;
          cursor: not-allowed;
        }

        &.active {
          background: var(--v-theme);
          color: white;
        }
      }
    }
  }
}
</style>